<template>
  <div class="func-comp-form">

    <ComponentGlobalSettingForm :id="id" :compConfigData="compConfigData"></ComponentGlobalSettingForm>

    <Tabs name="main_tabs" size="small" v-model="mainTabsValue">
      <TabPane name="main_tab" tab="main_tabs" label="主配置" :style="{padding: '10px'}">

        <Form :label-width="105">

          <FormItem label="边框">
            <Tooltip content="点击打开选择窗" placement="top">
              <div class="border-img-card"
                   style="padding-bottom: 0px; margin-top: 3px; cursor: pointer;" @click="modalVisible = !modalVisible">
                <img :src="require('./images/'+borderImage)"/>
              </div>
            </Tooltip>
          </FormItem>
          <FormItem label="透明度">
            <!--<InputNumber size="small" :max="1" :min="0" :step="0.1" v-model="opacity"></InputNumber>-->
            <Slider v-model="opacity" :max="1" :min="0" :step="0.1"></Slider>
          </FormItem>

          <FormItemPanel title="阴影">
            <FormItem label="显示">
              <i-switch v-model="shadow_show">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="内阴影">
              <i-switch v-model="shadow_inset">
                <span slot="open"></span>
                <span slot="close"></span>
              </i-switch>
            </FormItem>
            <FormItem label="阴影颜色">
              <PnColorPicker size="small" v-model="shadow_color" alpha/>
            </FormItem>
            <FormItem label="模糊半径">
              <InputNumber size="small" :max="100" :min="0" :step="1" v-model="shadow_blurRadius"></InputNumber> px
            </FormItem>
            <FormItem label="水平偏移">
              <InputNumber size="small" :max="20" :min="0" :step="1" v-model="shadow_h_offset"></InputNumber> px
            </FormItem>
            <FormItem label="垂直偏移">
              <InputNumber size="small" :max="20" :min="0" :step="1" v-model="shadow_v_offset"></InputNumber> px
            </FormItem>
          </FormItemPanel>

        </Form>

      </TabPane>

    </Tabs>

    <Drawer
        title="选择边框"
        v-model="modalVisible"
        width="330"
        :mask-closable="true">

      <Row :gutter="10">
        <i-col span="12" v-for="(bi, index) in borderImages" :key="index">
          <div class="border-img-card"
               :class="{'active' : borderImage == bi.value}" @click="borderImgCardClickHandle(bi.value)">
            <img :src="require('./images/'+bi.value)" />
          </div>
          <div style="margin-bottom: 10px;"></div>
        </i-col>
      </Row>

    </Drawer>

  </div>
</template>

<script>

  import FuncCompFormMixin from '@/mixin/FuncCompFormMixin'

  import { createHelpers } from 'vuex-map-fields';

  const { mapFields } = createHelpers({
    getterType: 'designer/getLayoutItem',
    mutationType: 'designer/updateLayoutItem',
  });

  export default {
    name: 'BorderCompForm',
    mixins: [FuncCompFormMixin],
    data() {
      return {
        modalVisible: false,

        /*borderImages: [
          {
            label: '边框1',
            value: 'border-svg-1.svg'
          },
          {
            label: '边框2',
            value: 'border-svg-2.svg'
          },
        ]*/
        borderImages: [
          {
            label: '边框1',
            value: 'border-1.png'
          },
          {
            label: '边框2',
            value: 'border-2.png'
          },
          {
            label: '边框3',
            value: 'border-3.png'
          },
          {
            label: '边框4',
            value: 'border-4.png'
          },
          {
            label: '边框5',
            value: 'border-5.png'
          },
          {
            label: '边框6',
            value: 'border-6.png'
          },
          {
            label: '边框7',
            value: 'border-7.png'
          },
          {
            label: '边框8',
            value: 'border-8.png'
          },
          {
            label: '边框9',
            value: 'border-9.png'
          },
          {
            label: '边框10',
            value: 'border-10.png'
          },
          {
            label: '边框11',
            value: 'border-11.png'
          },
          {
            label: '边框12',
            value: 'border-12.png'
          },
          {
            label: '边框13',
            value: 'border-13.png'
          },
          {
            label: '边框14',
            value: 'border-14.png'
          },
          {
            label: '边框15',
            value: 'border-15.png'
          },
          {
            label: '边框16',
            value: 'border-16.png'
          },
          {
            label: '边框17',
            value: 'border-17.png'
          },
          {
            label: '边框18',
            value: 'border-18.png'
          },

        ],
        borderImageStyles: {
          'border-1.png': '32 37 / 32px 37px / 0 stretch',
          'border-2.png': '14 fill / 14px / 0 stretch',
          'border-3.png': '14 100 / 14px 100px / 0 stretch',
          'border-4.png': '46 305 117 33 fill / 46px 305px 117px 33px / 0 repeat',
          'border-5.png': '45 103 51 29 fill / 45px 103px 51px 29px / 0 repeat',
          'border-6.png': '29 107 109 16 fill / 29px 107px 109px 16px / 0 repeat',
          'border-7.png': '15 11 16 8 fill / 15px 11px 16px 8px / 0 repeat',
          'border-8.png': '152 27 127 354 fill / 152px 27px 127px 354px / 0 repeat',
          'border-9.png': '56 4 76 393 fill / 56px 4px 76px 393px / 0 repeat',
          'border-10.png': '17 24 18 19 fill / 17px 24px 18px 19px / 0 repeat',
          'border-11.png': '32 37 fill / 32px 37px / 0 stretch',
          'border-12.png': '71 23 fill / 71px 23px / 0 stretch',
          'border-13.png': '288 500 272 680 fill / 288px 500px 272px 680px / 0 repeat',
          'border-14.png': '220 664 460 500 fill / 220px 664px 460px 500px / 0 repeat',
          'border-15.png': '423 606 410 652 fill / 423px 606px 410px 652px / 0 repeat',
          'border-16.png': '101 690 35 693 fill / 101px 690px 35px 693px / 0 repeat',
          'border-17.png': '65 740 88 561 fill / 65px 740px 88px 560px / 0 repeat',
          'border-18.png': '4 805 281 730 fill / 4px 805px 281px 730px / 0 repeat'
        }
      }
    },
    mounted() {

    },
    methods: {
      borderImgCardClickHandle (borderImage) {
        this.updateField('component.compConfigData.borderImage', borderImage);
        this.updateField('component.compConfigData.borderImageStyle', this.borderImageStyles[borderImage])
      }
    },
    computed: {
      ...mapFields({
        borderImage: 'component.compConfigData.borderImage',
        opacity: 'component.compConfigData.opacity',

        shadow_show: 'component.compConfigData.shadow_show',
        shadow_inset: 'component.compConfigData.shadow_inset',
        shadow_color: 'component.compConfigData.shadow_color',
        shadow_blurRadius: 'component.compConfigData.shadow_blurRadius',
        shadow_h_offset: 'component.compConfigData.shadow_h_offset',
        shadow_v_offset: 'component.compConfigData.shadow_v_offset',
      })
    }
  }
</script>

<style lang="less" scoped>
  .border-img-card {
    width: 100%;
    height: auto;
    background-color: #212121;
    border: 3px solid #e0e0e0;
    border-radius: 4px;
    padding: 8px;
    &.active {
      border-color: #29b6f6;
      box-shadow: 0 0 10px #000;
    }
    img {
      width: 100%;
      height: 60px;
    }
  }

</style>
